<template>
  <div class="search">
    <div class="kl-search">
      <span class="mui-icon mui-icon-search mui-pull-right"></span>
      <span class="mui-icon mui-icon-back mui-pull-left"
            @tap="back"></span>
      <input type="search"
             placeholder="请输入你想要的内容"
             autofocus>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
// @import "../../less/index.less";
.search {
  background-color: @klcolor;
  .kl-search {
    width: 100%;
    height: 80rem / @baseFontSize;
    padding: 0 80rem / @baseFontSize;
    span {
      width: 60rem / @baseFontSize;
      height: 60rem / @baseFontSize;
      line-height: 60rem / @baseFontSize;
      text-align: center;
      display: block;
      color: #000;
      position: absolute;
      top: 13rem / @baseFontSize;
      font-size: 50rem / @baseFontSize;
      &.mui-icon-search {
        right: 10rem / @baseFontSize;
      }
      &.mui-icon-back {
        left: 10rem / @baseFontSize;
      }
    }
    input {
      height: 50rem / @baseFontSize;
      background-color: #eee;

      margin-top: 15rem / @baseFontSize;
    }
  }
}
</style>
